<template>

  <div class="add">
<!--    个人信息-->
    <div class="Myself">
      <div class="Myself1">
        <van-image :src="this.user.photo" style="width: 100%;height: 100%;margin-top: -15px" />
<!--        <van-image src="https://tse2-mm.cn.bing.net/th/id/OIP-C.EIiHFklXha4SCPKjQuShgwHaHa?dpr=3&pid=ImgDetMain" style="width: 100%;height: 100%;margin-top: -15px" />-->
      </div>
      <div class="Myself2">
        <div class="MyselfName" >{{this.user.name}}</div>
        <div class="MyselfPhone">小默配送 {{this.xphone}}</div>
      </div>
      <div class="Myself3">
        〉
      </div>
    </div>
    <!--钱包余额-->
    <div class="purse">
        <div class="purse1">余额(￥)</div>
        <div class="purse2" style="display: flex">
          <div class="purse21" >{{this.account.availableBalance}}.00</div>
          <div class="purse22">今日收入 {{this.account.accountBalance}}.00</div>
          <div class="purse23">
            〉
          </div>
        </div>
    </div>
<!--    身份验证、帮助中心、在线客服、电话客服-->
    <div class="big">
      <div class="big1" >
        <van-image src="https://tse2-mm.cn.bing.net/th/id/OIP-C.EIiHFklXha4SCPKjQuShgwHaHa?dpr=3&pid=ImgDetMain" style="width:40px;height: 40px;margin-top: -5px;margin-left: 10px" />
        <div class="big11" >
          身份验证
        </div>
        <div class="big13" style="">
          <div  v-if="this.user.verification==1" style="margin-right: 10px">
            已认证
          </div>
          <div  v-if="this.user.verification==2" style="margin-right: 10px" >
            未认证
          </div>
          〉
        </div>
      </div>
      <div class="big1" >
        <van-image src="https://tse2-mm.cn.bing.net/th/id/OIP-C.EIiHFklXha4SCPKjQuShgwHaHa?dpr=3&pid=ImgDetMain" style="width:40px;height: 40px;margin-top: -5px;margin-left: 10px" />
        <div class="big11" >
          帮助中心
        </div>
        <div class="big12">
          〉
        </div>
      </div>
      <div class="big1" >
        <van-image src="https://tse2-mm.cn.bing.net/th/id/OIP-C.EIiHFklXha4SCPKjQuShgwHaHa?dpr=3&pid=ImgDetMain" style="width:40px;height: 40px;margin-top: -5px;margin-left: 10px" />
        <div class="big11" >
          在线客服
        </div>
        <div class="big12">
          〉
        </div>
      </div>
      <div class="big1" >
        <van-image src="https://tse2-mm.cn.bing.net/th/id/OIP-C.EIiHFklXha4SCPKjQuShgwHaHa?dpr=3&pid=ImgDetMain" style="width:40px;height: 40px;margin-top: -5px;margin-left: 10px" />
        <div class="big11" >
          电话客服
        </div>
        <div class="big12">
          〉
        </div>
      </div>
    </div>
    <div class="setup" style="margin-top: 20px;margin-left: 5px" @click="setUp">
      <div class="big1" >
        <van-image src="https://tse2-mm.cn.bing.net/th/id/OIP-C.EIiHFklXha4SCPKjQuShgwHaHa?dpr=3&pid=ImgDetMain" style="width:40px;height: 40px;margin-top: -5px;margin-left: 10px" />
        <div class="big11" >
          设置
        </div>
        <div class="big12">
          〉
        </div>
      </div>
    </div>



     <!--    底部导航栏-->
    <div>
      <van-tabbar v-model="active">
        <van-tabbar-item name="home" icon="wap-home-o" @click="home" >首页</van-tabbar-item>
        <van-tabbar-item name="message" icon="chat-o" dot>消息</van-tabbar-item>
        <van-tabbar-item name="my" icon="friends-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>



  </div>

</template>

<script>
import {selectByIp} from "@/api/SetUp/AccountSafe/account"

export default {
  data() {
    return {
      active: '',
      xphone:'',
      account:{},
      user: JSON.parse(localStorage.getItem('login')),
    };
  },
  created() {
    this.xphone=this.user.phone.substring(0,3)+'****'+this.user.phone.substring(7,11);
    this.active="my"
    this.selectByIp()
  },
  methods: {
    selectByIp(){
      selectByIp(this.user.registerIp).then(row => {
          this.account=row.data.data;
          console.log(this.account)
      })
    },
    // 跳转到设置页面
    setUp(){
      this.$router.push("/setup")
    },
    home(){
      this.$router.push("/home/Home")
    }
  },

};

</script>

<style scoped>

.add{
  width: 100%;
  height: 900px;
  background: white;
  margin-top: -20px;
}
.Myself{
  width: 100%;
  height: 100PX;
  margin: 20PX 0 0 0;
  display: flex;
}
.Myself1{
  width: 80px;
  height: 80px;
  margin: 10PX 0 0 15px;
  display: flex;
}
.Myself2{
  width: 65%;
  height: 80px;
  margin: 10PX 0 0 10px;
}
.MyselfName{
  margin: 10px 0 0 -200px;
  font-size: 20px;
}
.MyselfPhone{
  margin: 5px 0 0 -115px;
  font-size: 15px;
  color: #6c6c6c;
}
.Myself3{
  width: 10%;
  height: 100%;
  line-height: 90px;
  margin: 0PX 0 0 10px;
}
.purse{
  width: 90%;
  height: 95px;
  margin: 5% 0 0 5%;
  padding-top: 15px;
  box-shadow: 0px  4px 6px rgba(0, 0, 0, 0.1); /* 水平偏移、垂直偏移、模糊半径、颜色 */
}
.purse1{
  margin-left: -300px;
}
.purse2{
  width: 100%;
  height: 60px;
  padding : 10px  0 0 20px;
}
.purse21{
 line-height: 60px;
  font-size: 25px;
}
.purse22{
  width: 160px;
  line-height: 60px;
  font-size: 15px;
  margin-left: 60px;
  color: darkgray;
}
.purse23{
  height: 100%;
  margin-left: 50px;
  line-height: 60px;
  color: darkgray;
}
.big {
  width: 96%;
  height: 250px;
  margin-top: 25px;
  padding: 25px 0 25px 0;
  margin-left: 7px;
  border-bottom: 0.3px solid #c4c4c4; /* 添加灰色下边框 */
}
.big1{
  width: 100%;
  height: 60px;
  display: flex;
}
.big11{
  width: 30%;
  height: 100%;
  line-height: 60px;
  display: flex;
  padding-left: 20px;
  font-size: 18px;
}
.big12{
  height: 100%;
  line-height: 60px;
  margin-left: 200px;
  color: darkgray;
}
.big13{
  display: flex;
  height: 100%;
  line-height: 60px;
  width: 80px;
  margin-left: 150px;
  color: darkgray;
}
</style>
